import { useCallback, useState } from "react";
import { renderRoutes } from "react-router-config";
import style from "../../../style/permissionsnav.module.scss";
import Condition from "../../../component/Orders/condition";
import { Route } from "react-router-dom";
const Orderlist = ({ route: { routes } }) => {
  console.log(routes[0].routes);
  const [num, setNum] = useState(0);
  let switchAction = useCallback((id) => {
    // console.log(id);
    setNum(id);
  }, []);
  let arr = [
    { id: 0, text: "全部" },
    { id: 1, text: "待支付" },
    { id: 2, text: "待配送" },
    { id: 3, text: "配送中" },
    { id: 4, text: "交易完成" },
    { id: 5, text: "交易关闭" },
  ];
  return (
    <div>
      <Route
        exact
        path="/order/orderlist"
        component={() => {
          return (
            <>
              <ul className={style.nav}>
                {arr.map((item) => (
                  <li
                    key={item.id}
                    className={item.id === num ? style.active : ""}
                    onClick={() => switchAction(item.id)}
                  >
                    {item.text}
                  </li>
                ))}
              </ul>
              <Condition id={num} route={routes}></Condition>
            </>
          );
        }}
      />
      {renderRoutes(routes[0].routes)}
    </div>
  );
};

export default Orderlist;
